<template>
  <view>
    <u-navbar title="个人资料" :border-bottom="false" title-size="36"></u-navbar>
    <view class="form">
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="" style="font-size: 28rpx">头像</view>
        <view class="value">
          <u-avatar size="120" :src="userInfo.avatar"></u-avatar>
        </view>
      </view>
      <view class="item">
        <view class="label">姓名</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请输入姓名" class="input" v-model="userInfo.nickname" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">性别</view>
        <view
          @click="onPicker('selector', 'gender')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择性别" disabled v-model="userInfo.gender" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">学历</view>
        <view
          @click="onPicker('selector', 'edu')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择学历" disabled v-model="userInfo.edu" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">手机号</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请输入手机号" class="input" v-model="userInfo.phone" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">参加工作时间</view>
        <view
          @click="onPicker('time', 'join_work')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择参加工作时间" disabled v-model="userInfo.join_work" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">出生年月</view>
        <view
          @click="onPicker('time', 'birthday')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择出生年月" disabled v-model="userInfo.birthday" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>

      <view class="item">
        <view class="label">所在城市</view>
        <view @click="onPicker('region')" class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请选择城市" disabled v-model="userInfo.address" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view @click="submit" class="submit-btn btn"> 确认保存 </view>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :params="params"
      :range-key="rangeKey"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rangeKey: '',
      range: [],
      mode: 'selector',
      regionGenderList: [
        {
          gender: '男',
          value: '男'
        },
        {
          gender: '女',
          value: '女'
        }
      ],
      eduList: [
        {
          edu: '高中',
          value: '高中'
        },
        {
          edu: '大专',
          value: '大专'
        },
        {
          edu: '本科',
          value: '本科'
        },
        {
          edu: '硕士研究生',
          value: '硕士研究生'
        },
        {
          edu: '博士研究生',
          value: '博士研究生'
        }
      ],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
        province: true,
        city: true,
        area: true,
        timestamp: true
      },
      show: false,
      userInfo: {
        nickname: '幕刃',
        avatar: '',
        gender: '男',
        birthday: '1999-09',
        address: '',
        edu: ''
      }
    }
  },
  methods: {
    onPicker(e, f) {
      this.mode = e
      if (f == 'gender') {
        this.rangeKey = 'gender'
        this.range = this.regionGenderList
      } else if (f == 'edu') {
        this.rangeKey = 'edu'
        this.range = this.eduList
      } else if (f == 'rule') {
        this.rangeKey = 'data'
        this.range = this.regionRuleList
      }
      this.show = true
    },
    confirmSelctor(e) {
      console.log(e)
      if (this.mode == 'selector') {
        if (this.rangeKey == 'gender') {
          this.userInfo.gender = this.range[e].value
        }
      } else if (this.mode == 'time') {
        this.userInfo.birthday = e.year + '-' + e.month
      } else {
        this.userInfo.address = e.province.label + e.city.label + e.area.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');
page {
  // padding: 30rpx 0;
  background-color: #f0f1f2;
}
.form {
  background-color: #fff;
  .item {
    padding: 30rpx 30rpx 24rpx 30rpx;
    border-bottom: 1rpx solid #dfe0e6;

    .label {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }

    .value {
      input {
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
